import React,{Component} from 'react'
import logo from '../static/logo.png'
import { Layout, Menu, Breadcrumb, Icon,Dropdown } from 'antd';
import {Link} from 'react-router-dom'
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

const menu = (
    <Menu>
      <Menu.Item key="0"><Link to='/homepage'>首页</Link></Menu.Item>
      <Menu.Item key="1"><Link to='/'>退出</Link></Menu.Item>
    </Menu>
);
class HomePage extends Component{
    render(){
        return (
            <Layout style={{height:'100%'}}>
                <Header className="header" style={{backgroundColor:'#ccc',padding:'0'}}>
                    <img src={logo} alt="1" style={{height:'64px'}} />
                    <div style={{float:'right',marginRight:"3%"}}>
                        <Icon type="scan" style={{cursor:'pointer',fontSize:'20px'}} />
                        <Dropdown overlay={menu} trigger={['click']}>
                            <span className="ant-dropdown-link">
                            <span style={{padding:'0 10px 0 30px'}}>admin</span>
                            <Icon type="down" style={{cursor:'pointer'}} />
                            </span>
                        </Dropdown>
                    </div>
                    
                </Header>
                <Layout>
                <Sider width={200} style={{ background: '#fff' }}>
                    <Menu
                    mode="inline"
                    style={{ height: '100%', borderRight: 0 }}
                    >
                    <SubMenu
                        key="sub1"
                        title={
                        <span>
                            <Icon type="home" />
                            首页
                        </span>
                        }
                    >
                        <Menu.Item key='1'><Link to="/homepage/datacount">数据统计</Link></Menu.Item>
                    </SubMenu>
                    <SubMenu
                        key="sub2"
                        title={
                        <span>
                            <Icon type="user" />
                            用户管理
                        </span>
                        }
                    >
                        <Menu.Item key="2">用户列表</Menu.Item>
                    </SubMenu>
                    <SubMenu
                        key="sub3"
                        title={
                        <span>
                            <Icon type="notification" />
                            权限管理
                        </span>
                        }
                    >
                        <Menu.Item key="3">权限列表</Menu.Item>
                        <Menu.Item key="4">用户权限</Menu.Item>
                    </SubMenu>
                    <SubMenu
                        key="sub4"
                        title={
                        <span>
                            <Icon type="shop" />
                            商品管理
                        </span>
                        }
                    >
                        <Menu.Item key="5">商品列表</Menu.Item>
                        <Menu.Item key="6">商品分类</Menu.Item>
                    </SubMenu>
                    <SubMenu
                        key="sub5"
                        title={
                        <span>
                            <Icon type="ordered-list" />
                            订单管理
                        </span>
                        }
                    >
                        <Menu.Item key="7">订单列表</Menu.Item>
                    </SubMenu>
                    </Menu>
                </Sider>
                <Layout style={{ padding: '0 24px 24px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                    </Breadcrumb>
                    <Content
                    style={{
                        background: '#fff',
                        padding: 24,
                        margin: 0,
                        minHeight: 280,
                    }}
                    >
                    {this.props.children}
                    </Content>
                </Layout>
                </Layout>
            </Layout>
        )
    }
}

export default HomePage